<template>
  <el-dialog
    :visible="visible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    class="update-or-created"
    append-to-body
    destroy-on-close
    :width="handleScreenWidthToVw(590)+'px'"
  >
    <div slot="title" class="fw-500 title">{{ sceneInfo.id ? '场景管理' : '新建场景' }}</div>
    <div class="w-100P justify-center">
      <el-form ref="form" :model="sceneInfo" label-width="90px" size="small" :rules="rules">
        <el-form-item label="场景名字" prop="name">
          <el-input class="input" v-model="sceneInfo.name" placeholder="请输入场景名字" />
        </el-form-item>
        <el-form-item label="背景图">
          <UploadImg is-show-tip :limit="1" @success="handleUploadFileSuccess">
            <div class="upload-info">
              <img
                v-if="sceneInfo.id && sceneInfo.icon"
                :src="sceneInfo.icon | imageFormat"
                class="avatar"
              />
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
                style="width: 160px; height: 160px;"
              />
            </div>
          </UploadImg>
        </el-form-item>
        <el-form-item label="是否启用" prop="dataStatusEnum">
          <el-switch
            v-model="sceneInfo.dataStatusEnum"
            :active-value="$consts.DataStatusEnum.NORMAL"
            :inactive-value="$consts.DataStatusEnum.STOP"
            active-color="#D12D1F"
            inactive-color="#999999"
          />
        </el-form-item>
        <el-form-item v-if="sceneInfo.id" label="已绑定角色">
          {{ sceneInfo.roleVos ? sceneInfo.roleVos.map(role => role.name).join(',') : '(无)' }}
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer w-100P justify-center">
      <el-button size="small" type="primary" @click="handleConfirm">保存</el-button>
      <el-button size="small" @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import UploadImg from '@/components/upload-img/index'
import { apiAddScene, apiUpdateScene } from '@/views/scene/api'
import { handleScreenWidthToVw } from '@/utils/tools'

export default {
  name: 'UpdateOrCreated',
  components: { UploadImg },
  props: {
    visible: { type: Boolean, required: true, default: false },
    sceneData: { type: Object, required: true },
  },
  data() {
    return {
      imageUrl: '',
      sceneInfo: {},
    }
  },
  computed: {
    rules() {
      return {
        name: { required: true, trigger: 'blur', message: '产品名称不能为空！' },
        dataStatusEnum: { required: true, trigger: 'change', message: '启用状态不能为空' },
      }
    },
    handleScreenWidthToVw: () => handleScreenWidthToVw,
  },
  watch: {
    visible: {
      immediate: true,
      handler() {
        // this.imageUrl = this.sceneInfo.id ? this.sceneInfo.icon : ''
      },
    },
    sceneData: {
      immediate: true,
      deep: true,
      handler(value) {
        // this.imageUrl = this.sceneInfo.id ? this.sceneInfo.icon : ''
        this.sceneInfo = value
      },
    },
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
    },
    async handleConfirm() {
      let msg = ''
      try {
        if (this.sceneInfo.id) {
          await apiUpdateScene(this.sceneInfo)
          msg = '修改成功'
        } else {
          await apiAddScene(this.sceneInfo)
          msg = '创建成功'
        }
        this.$message.success(msg)
        this.handleClose()
        this.$emit('change')
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleUploadFileSuccess(fileList) {
      this.sceneInfo.icon = fileList[fileList.length - 1].fileId
      this.imageUrl = this.sceneInfo.icon
    },
  },
}
</script>

<style lang="scss" scoped>
.update-or-created {
  .avatar-uploader-icon {
    width: 300px;
    height: 170px;
    font-size: 28px;
    line-height: 160px;
    color: #8c939d;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
  }

  .avatar {
    display: block;
    width: 300px;
    height: 170px;
  }

  ::v-deep .el-dialog__footer {
    padding: 0;
  }

  ::v-deep .el-dialog__header {
    padding: 0;
  }

  .title {
    padding: 20px 20px 10px;
    // background-color: #f8f8f8;
  }

  .dialog-footer {
    padding: vw(8px) vw(16px);
    // background: #f0f4f8;
  }

  .input {
    width: vw(350px);
  }
}
</style>
